<template>
	<view class="container">
		<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
			<view id="demo1" class="scroll-view-item_H" v-for="item in categorys">
				<view style="width: 100%;height: 100%;display: flex;flex-direction: column;align-items: center;">
					<image :src="item.img" style="width:100upx;height: 100upx;"></image>
					<text style="line-height: 40upx;font-size: 30upx;">{{item.name}}</text>
				</view>

			</view>
		</scroll-view>
		<view class="good-list-box">123123123</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categorys: [] // ...更多分类
			}
		},
		methods: {
			async getGoodsCategory() {
				//获取商品分类
				const response = await this.$api.goods.getGoodsCategory();
				this.categorys = response.data.list
				if(this.categorys.length > 0){
					this.getGoodListByCategory(this.categorys[0].id)
				}
			},
			async getGoodListByCategory(categoryId) {
				//获取商品分类
				const response = await this.$api.goods.getGoodListByCategory(categoryId);
				console.info(response);
			},
		},
		onLoad() {
			console.info(123123);
			//加载商品分类，且展示产品
			this.getGoodsCategory();
		}
	}
</script>

<style scoped lang="scss">
	.scroll-Y {
		height: 300rpx;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
		padding: 5upx;
		// background-color: red;
	}

	.scroll-view-item {
		height: 50upx;
		line-height: 50upx;
		text-align: center;
		font-size: 36rpx;

	}

	.scroll-view-item_H {
		display: inline-block;
		margin: 5upx;
		padding: 10upx;
		// border: 1px #a5a7aa solid;
		background-color: #b3b3b3;
		width: 140upx;
		height: 140upx;
		line-height: 100rpx;
		text-align: center;
		font-size: 36rpx;
		border-radius: 10upx;
		// background-color: red;
		// margin: 0 1px 0 1px;
	}
	.good-list-box{
		margin-top: 10upx;
	}
</style>